<template>
	<view class="container community-container">
		<view class="index-top">
			<image class="page-bg" :src="$fileUrl+'page-bg2.png'" mode="widthFix"></image>
			<view class="index-top-main" :style="getTopStyle()">
				<view class="index-top-title">庞大集群的专业领域社区</view>
				<view class="index-top-tips">聚焦专业细分产业领域为聚焦，围绕中医药战略性新兴产业</view>
				<image class="page-top-bg" :src="$fileUrl+'community-bg.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="page-main">
			<view class="search-panel">
				<text class="iconfont">&#xe602;</text>
				<input class="search-input" v-model="keywords" type="text" placeholder="搜索感兴趣的社群" />
			</view>
			<view class="panel-title">行业社区</view>
			<view>
				<view class="page-list" v-for="item in 5">
					<view class="list-img-box">
						<image class="list-img" :src="$fileUrl+'page-bg2.png'" mode="aspectFit"></image>
					</view>
					<view class="list-bottom">
						<text>生物医药</text>
						<text class="iconfont c-primary">申请加入 &#xe775;</text>
						
					</view>
				</view>
				<view class="not-more" v-if="isLoading">加载中...</view>
				<view class="null-page" v-else-if="pageList.length<=0 ">
					<text class="iconfont">&#xe642;</text>
					<view class="null-page-tips">暂无数据~</view>
				</view>
				<view class="not-more" v-else-if="notMore">没有更多了...</view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	const keywords = ref('')
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageList = ref([{}])
	const getTopStyle = () => {
		// #ifdef MP-WEIXIN
		const res = uni.getMenuButtonBoundingClientRect()
		return `padding-top:${res.top + 20}px`
		// #endif
		// #ifdef H5
		return `padding-top:20px`
		// #endif
	}
</script>

<style lang="scss">
	.community-container {
		padding-bottom: 200rpx;

		.index-top {
			position: relative;
		}

		.page-bg {
			width: 100%;
			height: 500rpx;
		}

		.index-top-main {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			padding: 30rpx;
		}

		.index-top-title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.index-top-tips {
			font-size: 26rpx;
			margin-top: 15rpx;
		}

		.page-top-bg {
			margin-top: 20rpx;
			width: 100%;
		}
		
		.page-main{
			padding: 0 30rpx;
		}
		.search-panel {
			background: #FFFFFF;
			box-shadow: 0px 8rpx 16rpx 0px rgba(47, 101, 243, 0.1);
			display: flex;
			align-items: center;
			height: 86rpx;
			border-radius: 86rpx;
			width: 690rpx;
			margin: 0 auto;
			padding: 25rpx;
			font-size: 30rpx;
		
			.iconfont {
				margin-right: 20rpx;
			}
		
			.search-input {
				flex-grow: 1;
			}
		}
		
		.panel-title{
			font-weight: bold;
			font-size: 30rpx;
			color: #2F65F3;
			padding: 20rpx 0;
		}
		
		.page-list{
			display: inline-block;
			width: 49%;
			margin-right: 2%;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 8rpx 16rpx 0px rgba(47,101,243,0.1);
		}
		.page-list:nth-child(2n){
			margin-right: 0;
		}
		
		.list-img-box{
			width: 100%;
			height: 174rpx;
		}
		.list-img{
			width: 100%;
			height: 100%;
		}
		.list-bottom{
			border-top: solid 1px #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			height: 70rpx;
			padding: 0 20rpx;
			.iconfont{
				font-size: 24rpx;
			}
		}
	}
</style>